<!--
 * @FilePath     : /study_code/layui/6-3-8.html
 * @Description  : layer.tips()
 * @Date         : 2025-04-08 16:46:28
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 17:32:12
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <div id="id" style="width: 200px; height: 200px; margin: 50px 90px">我的容器</div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      /**
       * @brief: 吸附弹出框（默认是在元素右边弹出，可 智能定位，即灵活地判断它应该出现在哪边）
       * @param {String} content, 提示文本内容
       * @param {String} follow, 吸附的容器
       * #值：jq选择器
       * #this：指向事件回调调用者元素；
       * @param {Object} [, options], 配置参数项；
       * @return {*}
       */
      // layer.tips(content, follow[, options])

      /**
       * @brief:
       * @return {*}
       */
      /*
      // 置为已评价提示语
      $('.setEvaluate').mouseover(function () {
        // 鼠标引入时出现吸附提示框
        tips_index = layui.layer.tips(
          "<span style='color:black;font-size: 14px;'>只能将已完成状态的任务置为已评价</span>",
          this, // 吸附在当前事件调用者容器上
          { tips: [3, '#D3D3D3'], area: ['auto', 'auto'], time: 0 }
        )
      })
      */

      //eg1
      layer.tips('只想提示地精准些', '#id') // 某容器

      //eg 2
      $('#id').on('click', function () {
        var that = this
        layer.tips('只想提示地精准些', that) //在元素的事件回调体中，follow直接赋予this即可
      })

      //eg 3
      layer.tips('在上面', '#id', {
        tips: 1,
      })
    </script>
  </body>
</html>
